<template>
  <a-card title="进行中的项目" class="projecting">
    <a slot="extra" href="#" style="color: rgb(19, 194, 194)">全部项目</a>
    <a-card-grid style="width:33.33%;text-align:center" v-for="(item, index) in lists" :key="'projecting' + index">
      <div class="title">
        <img :src="item.img" :alt="item.title">
        <span>{{ item.title }}</span>
      </div>
      <p>{{ item.content }}</p>
      <div class="project-item">
        <span>{{ item.name }}</span>
        <span>{{ item.created | filterTime }}</span>
      </div>
    </a-card-grid>
  </a-card>
</template>

<script>
export default {
  name: 'projecting',
  data () {
    return {
      lists: [
        { 
          img: require('@/assets/user.png'),
          title: 'Alipay',
          content: '那时候我只会想自己想要什么，从不想自己拥有什么',
          name: '科学搬砖组',
          created: '2020-10-12 12:12:12'
        },
        { 
          img: require('@/assets/user.png'),
          title: 'Alipay',
          content: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
          name: '科学搬砖组',
          created: '2021-08-21 12:12:12'
        },
        { 
          img: require('@/assets/user.png'),
          title: 'Alipay',
          content: '那时候我只会想自己想要什么，从不想自己拥有什么',
          name: '科学搬砖组',
          created: '2020-10-12 12:12:12'
        },
        { 
          img: require('@/assets/user.png'),
          title: 'Alipay',
          content: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
          name: '科学搬砖组',
          created: '2021-08-21 12:12:12'
        },
        { 
          img: require('@/assets/user.png'),
          title: 'Alipay',
          content: '那时候我只会想自己想要什么，从不想自己拥有什么',
          name: '科学搬砖组',
          created: '2020-10-12 12:12:12'
        },
        { 
          img: require('@/assets/user.png'),
          title: 'Alipay',
          content: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
          name: '科学搬砖组',
          created: '2021-08-25 12:12:12'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.projecting {
  .title {
    text-align: left;
    margin-bottom: 10px;
    img {
      width: 32px;
      height: 32px;
      margin-right: 16px;
    }
    span {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 16px;
    }
  }
  p {
    text-align: left;
    height: 44px;
    line-height: 22px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.45);
  }
  .project-item {
    display: flex;
    justify-content: space-between;
    span {
      &:first-child {
        &:hover {
          color: rgb(19, 194, 194);
          cursor: pointer;
        }
      }
    }
  }
}
</style>
